@extends('layouts.front')

@section('content')
@push('styles')
<style>
    html,
    body {
        height: auto;
    }
    [v-cloak]{
        display:none
    }
</style>
@endpush

<div class="container-home">
    <!-- banner START -->
    <div class="swiper-container banner-container" v-cloak>
        <div class="swiper-wrapper banner-wrapper">
            <a v-for="(banner, index) in banners" :key="index"  :href="banner.url" class="swiper-slide banner-slide">
                <img :src="banner.img_url" alt="">
            </a>
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <div class="menu-top" v-cloak>
        <a v-for="(menu, index) in menus" :key="index" :href="menu.link" class="menu-top-item">
            <div class="menu-top-item-l">
                <img class="menu-icon" :src="menu.icon" alt="">
            </div>
            <div class="menu-top-item-r">
                <div class="menu-top-label">@{{ menu.title }}</div>
                <div class="menu-top-des">@{{ menu.des }}</div>
            </div>
        </a>
    </div>
    <!-- banner END -->

    <div class="pane-home"  v-cloak>
        <div class="pane-home-h">
            <div class="title">推荐分类</div>
        </div>
        <div class="pane-home-b">
            <div class="cate-home clearfix">
                <a v-for="(cate, index) in cates" :key="index" :href="cate.link" class="cate-home-item">
                    <div class="cate-home-item-icon">
                        <img :src="cate.img_url" alt="">
                    </div>
                    <div class="cate-home-item-label">
                        @{{ cate.name }}
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="pane-home rcd-home" v-cloak>
        <div class="pane-home-h">
            <div class="title">猜你喜欢</div>
        </div>
        <div class="pane-home-b">
            <ul class="pro-rcd-list clearfix">
                <li v-for="(rcd, index) in rcds" :key="index" class="pro-rcd-item">
                    <a :href="'product/' + rcd.id + '.html'">
                        <div class="pro-rcd-img">
                            <img :src="rcd.cover_image" alt="">
                        </div>
                        <div class="pro-rcd-item-f">
                            <div class="pro-rcd-name">
                                @{{ rcd.name }}
                            </div>
                            <div class="pro-rcd-item-fb">
                                <div class="price">
                                    ¥@{{ rcd.price }}
                                </div>
                                <div class="des">
                                    现货
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

@section('tabbar')
    @parent
@endsection

@push('scripts')
<script>
    $('#dd').submit();
var vm = new Vue({
    el: '#app',
    data() {
        return {
            banners: [],
            menus: [
                {   
                    title: '供应大厅',
                    des: '步步领鲜 食全食美', 
                    icon: './images/icon/gydt.svg', 
                    link: '/market.html'
                },
                { 
                    title: '全国行情',
                    des: '行情走势 尽在掌中', 
                    icon: './images/icon/hq.svg', 
                    link: '/market'
                },
            ],
            cates: [
                {name: '龙虾', img_url: './images/icon/lobster.svg', link: '/market.html?cid=4'},
                {name: '螃蟹', img_url: './images/icon/xie.svg', link: '/market.html?cid=5'},
                {name: '笼子', img_url: './images/icon/lz.svg', link: '/market.html?cid=6'},
                {name: '饵料', img_url: './images/icon/yer.svg', link: '/market.html?cid=8'}
            ],
            rcds: [],
        }
    },
    created() {
        this.inntShow();
        this.getRcds();
    },
    mounted() {
    },
    methods: {
        inntShow: function(){
            axios.get('/home/fetchIndex').then(response => {
                this.banners = response.data.data;
                this.$nextTick(function(){
                    var swiper = new Swiper('.swiper-container', {
                        pagination: {
                            el: '.swiper-pagination',
                        },
                    });
                });

            });
        },
        getRcds: function() {
            axios.get('/home/recommend').then(response => {
                this.rcds = response.data.data;
            });
        },
    }
})  
</script>

@endpush
@endsection
